import React, { Component } from 'react';
import { Button, Form, Input, Space, Radio } from "antd";
import TheQuill from "../../../../components/TheQuill";
import TheUpload from '../../../../components/TheUpload';

class Editor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fileList: null,
    }
  }
  componentDidMount() {
    if (this.props.type === "add") {
      this.formRef.setFieldsValue({})
    } else {
      this.formRef.setFieldsValue({ ...this.props.data })
      this.setNewsContent(this.props.data.aboutUsDetails)
      let fileList = []
      if (this.props.data.aboutUsDetailsImage) {
        fileList=[{
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: this.props.data.aboutUsDetailsImage,
        }]
      }
      this.setState({
        fileList
      })
    }
    // if (this.props.data) {
    //     this.formRef.setFieldsValue({ ...this.props.data })
    //     this.setNewsContent(this.props.data.aboutUsDetails)
    //     const fileList = [
    //         {
    //             uid: '-1',
    //             name: 'image.png',
    //             status: 'done',
    //             url: this.props.data.aboutUsDetailsImage,
    //         },
    //     ]
    //     this.setState({
    //         fileList
    //     })
    // }
  }

  /**
   * @desc 设置新闻内容表单默认值
   * */
  setNewsContent = (data) => {
    this.formRef.setFieldsValue({ aboutUsDetails: data })
  }

  //图片上传回调
  getDetailsFileResult = value => {
    if (value.length && value[0] && value[0].response) {
      this.formRef.setFieldsValue({
        aboutUsDetailsImage: value[0].response.data
      })
    } else {
      this.formRef.setFieldsValue({
        aboutUsDetailsImage: ''
      })
    }
  }
  render() {
    const { btnLoading, dialogCancel, onFinish, data, type } = this.props
    const { fileList } = this.state
    let show = type === "add" ? true : false
    return <Form
      ref={ref => {
        this.formRef = ref
      }}
      onFinish={onFinish}
    >
      <Form.Item name={'aboutUsTitle'} rules={[{ required: true, message: '请输入标题' }]} label={'标题'}>
        {type === "add" ? <Input maxLength={20} /> : <span>{this.props.data.aboutUsTitle}</span>}
      </Form.Item>
      <Form.Item label={'文本'} name={'aboutUsDetailsScript'} >
        <Input />
      </Form.Item>
      <Form.Item label={'图片'} name={'aboutUsDetailsImage'} >
        {!show && fileList && fileList.length != 0 && <TheUpload fileList={fileList} maxSize={10} len={1}
          getFileResult={this.getDetailsFileResult} />}
        {(show || fileList && fileList.length == 0) && <TheUpload len={1} maxSize={10}
          getFileResult={this.getDetailsFileResult} />
        }
      </Form.Item>
      <Form.Item name={'aboutUsDetails'}
        label={'详情'}>
        <TheQuill defaultValue={show ? null : data.aboutUsDetails} setNewsContent={this.setNewsContent} />
      </Form.Item>
      <div className="p-text-align">
        <Space size="large">
          <Button key="back" onClick={dialogCancel}>
            取 消
          </Button>
          <Button type="primary" loading={btnLoading} htmlType="primary">
            确 定
          </Button>
        </Space>
      </div>
    </Form>
  }
}

export default Editor;